@drag-handle-bar-padding: -1px;
@drag-handle-bar-size: 1px;
@drag-handle-bar-size: 5px;
@drag-handle-color: rgba(92, 143, 235, 0.63);

.slideout-resize--handle {
  position: absolute;
  z-index: 60;
  user-select: none;
  border: 1px solid transparent;
  box-sizing: border-box;
  background-clip: content-box;

  &:hover {
    background-color: darken(@drag-handle-color, 20%);
  }

  &:active {
    background-color: darken(@drag-handle-color, 30%);
  }
}

.slideout-dock--top {
  > .slideout-panel {
    > .slideout-resize--handle {
      bottom: @drag-handle-bar-padding;
      left: 0;
      right: 0;
      height: @drag-handle-bar-size;
      cursor: ns-resize;
    }
  }
}

.slideout-dock--right {
  > .slideout-panel {
    > .slideout-resize--handle {
      top: 0;
      bottom: 0;
      left: @drag-handle-bar-padding;
      width: @drag-handle-bar-size;
      cursor: ew-resize;
    }
  }
}

.slideout-dock--bottom {
  > .slideout-panel {
    > .slideout-resize--handle {
      top: @drag-handle-bar-padding;
      left: 0;
      right: 0;
      height: @drag-handle-bar-size;
      cursor: ns-resize;
    }
  }
}

.slideout-dock--left {
  > .slideout-panel {
    > .slideout-resize--handle {
      top: 0;
      right: @drag-handle-bar-padding;
      bottom: 0;
      width: @drag-handle-bar-size;
      cursor: ew-resize;
    }
  }
}

.slideout-is--resizable {
  &.slideout-dock--left, &.slideout-dock--right {
    > .slideout-panel {
      will-change: width;
    }
  }

  &.slideout-dock--top, &.slideout-dock--bottom {
    > .slideout-panel {
      will-change: height;
    }
  }
}
